<template>
    <div class="words-item">
        <div class="flex items-center justify-between pr-8px words-item__title font-bold text-14px">
            <div class="flex-grow overflow-hidden">
                <div class="word-tab">
                    <Scroll ref="scrollRef">
                        <ul>
                            <li v-for="(item, index) in ruleForm.backWords" :key="item.label" :data-scroll="item.label"
                                :class="{ 'active': state.activeIndex == index }" @click="handleTab(item.label, index)">
                                {{
                                    item.label }}</li>
                        </ul>
                    </Scroll>
                </div>
            </div>
            <div class="flex ml-8px">
                <el-button type="primary" size="small" @click="handleAdd">添加</el-button>
                <el-button type="success" size="small" @click="handleBatchAdd" class="!ml-8px">批量添加</el-button>
            </div>
        </div>
        <div class="h-350px words-item__list">
            <div v-for="(item, index) in ruleForm.backWords" :key="index" v-show="state.activeIndex === index">
                <Words :index="state.activeIndex" :rule-form="ruleForm" :words="ruleForm.backWords[state.activeIndex]"
                    @changeWords="handleChangeWords" v-if="ruleForm.backWords.length"></Words>
            </div>
        </div>
        <BatchWord v-model:isBatch="state.isBatch" @closeDialog="handleClose" @confirm="handleConfirm"></BatchWord>
    </div>
</template>

<script setup lang="ts">
import BatchWord from './BatchWord.vue'

const props = defineProps<{
    ruleForm: any;
}>()

const state = reactive({
    activeIndex: 0,
    loading: true,
    isBatch: false
})

const scrollRef = ref()

function handleAdd() {
    const hasEmptyString = props.ruleForm.backWords[state.activeIndex].list.some((obj:any) => Object.values(obj).some(value => value === ''))
    if (hasEmptyString) {
        ElMessage.error('请输入完整的后置词后，才可以继续添加！')
        return
    }else{
        //新增并获取焦点
        props.ruleForm.backWords[state.activeIndex].list.unshift({
            label: '',
            value: 1,
            customize:true
        })
    }
}

function handleBatchAdd() {
    state.isBatch = true
}

function handleClose() {
    state.isBatch = false
}

function handleConfirm(value:any){
    value.forEach((item: string) => {
        if (item.length > 0) {
            // 检查是否已存在相同的标签，并返回索引
            const duplicateIndex = props.ruleForm.backWords[state.activeIndex].list.findIndex((keyword: any) => keyword.label === item)
            // 如果duplicateIndex为-1，表示没有找到重复的标签；如果大于等于0，则表示找到了重复标签的索引
            if (duplicateIndex !== -1) {
                // 找到了重复的标签，duplicateIndex就是该标签在数组中的索引
                props.ruleForm.backWords[state.activeIndex].list[duplicateIndex].value = 1
            } else {
                // 没有找到重复标签，可以安全地添加新标签
                props.ruleForm.backWords[state.activeIndex].list.unshift({
                    label: item,
                    value: 1,
                    customize: true
                })
            }
        }
    })
}

function handleTab(tab: string, index: number) {
    state.activeIndex = index
    scrollRef.value.moveToTarget(tab)
}

function handleChangeWords(backWords: any) {
    if (props.ruleForm.backWords[state.activeIndex].label == backWords.label) {
        props.ruleForm.backWords[state.activeIndex].list = backWords.list
    }
}
</script>

<style lang="scss" scoped>
:deep(.el-checkbox-group){
    display: block !important;
}
:deep(.el-checkbox__label) {
    width: 90%;
}

:deep(.el-checkbox) {
    margin-right: 0 !important;
    width:33.33%;
}
:deep(.el-input){
    height: 28px;
}
:deep(.el-button--danger){
    height: 28px;
    padding-left: 8px;
    padding-right: 8px;
}
</style>